<template>
	<header>
		<div class="carousel">
			<swiper auto loop dots-position='center' height='5.1rem'>
				<swiper-item><img src="../../assets/xbn.jpg" /></swiper-item>
				<swiper-item><img src="../../assets/xbn2.jpg" /></swiper-item>
				<swiper-item><img src="../../assets/xbn3.jpg" /></swiper-item>
				<div class="carText">
					<p>自助退订，科技服务，舒适有度，当之无愧</p>
					<i class="solid"></i>
					<strong>具备完善功能的别墅式客房</strong>
					<p>星级服务体验   温馨   享受   舒适  上千套房间任君挑选</p>
					<p>一次给你奇妙之旅自助退订，科技服务舒适有度</p>
					<p>当之无愧 让酒店回归居家本质</p>
				</div>
		  </swiper>
		</div> 
	</header>
</template>

<script>
	import {Swiper, SwiperItem} from 'vux'
	export default {
		components : {
			Swiper, SwiperItem
		},
		data (){
			return {
			
			}
		},
		methods : {
		
		}
	}
</script>

<style>
	header .carousel{
		height:5.1rem; position: relative;
	}
	header .carousel img{
		width:100%; height: 100%;
	}
	.vux-slider > .vux-indicator > a > .vux-icon-dot{
		background: #000 !important; border:0.01rem solid #fff; border-radius: 0.06rem !important; width:0.07rem !important; height:0.07rem !important;	
	}
	.vux-slider > .vux-indicator > a > .vux-icon-dot.active{
		background: #fff !important; border:0.01rem solid #000;
	}
	header .carousel .carText{
		position: absolute; z-index: 99; color: #fff; text-align: center; width: 100%; top:26%;
	}
	header .carText p{
		 line-height: 0.3rem;
	}
	header .carText strong{
		font-size: 0.24rem; margin: 0.15rem auto; display: inline-block;
	}
	header .carText .solid{
		width:0.6rem; height: 0.03rem; background: #fff; display: block; margin: 0.08rem auto;
	}
	header .carText p:nth-of-type(1){
		font-size: 0.14rem;
	}
</style>



























